<template>
  <div class="admin-list">
    <ul class="list">
      <li
        v-for="d in list"
        :key="d"
      >
        <div
          class="cover"
          :style="{'background-image':`url(${d.cover})`}"
        ></div>
          <div class="name">
            {{d.album}} - {{d.singer}}
          </div>
          <button @click="detail(d.id)">查看详情</button>
          <router-link :to="'/main/detail?id='+d.id">查看详情</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import list from '../album-list.js'
  export default {
    data(){
      return {
        list
      }
    },
    methods:{
      detail(id){
        location.href="./#/main/detail?id="+ id
        //$router路由实例
        this.$router.push('/main/detail?id='+id)
      }
    }
  }
</script>

<style lang="sass" scoped>
.list
  background: #fff
  box-shadow: 0 0 3px 0 #ccc
  border-radius: 5px
  padding: 0 20px
  &+.list
    margin-top: 20px
  &:last-child li:last-child
    font-weight: bold
  li
    display: flex
    align-items: center
    justify-content: space-between
    padding: 30px 0
    &+li
      border-top: 1px solid #ccc
    .cover
      width: 80px
      height: 80px
      border-radius: 50%
      background: #ccc
      background-repeat: no-repeat
      background-size: cover
      margin-left: 20px
      flex-shrink: 0
    .info
      padding-left: 20px
      font-size: 16px
      flex-grow: 1
</style>
